<template>
  <a-card>
    <div style="margin-bottom: 10px;text-align: right">
      <a-button type="primary" @click="addBusiness" v-permiss="['add']">添加事业部</a-button>
    </div>
    <a-table bordered row-key="id" :columns="tableColumn" :data-source="tableData" :pagination="pagination"
    >
      <template #operation="{record }">
        <a-button type="link" @click="editBusiness(record)" v-permiss="['update']">修改</a-button>
      </template>
    </a-table>

  </a-card>
  <a-modal v-model:visible="visible.isShow" :title="visible.title"
           :afterClose="clearForm" @ok="confirm"
           :maskClosable="false"
  >
    <a-form :rules="rulesForm" :model="form" ref="formRef" :label-col="{span:4}">
      <a-form-item label="事业部名称" name="name">
        <a-input v-model:value="form.name"/>
      </a-form-item>
        <a-form-item label="国家战区" name="countryId">
        <a-select v-model:value="form.countryId">
          <a-select-option :value="1">越南</a-select-option>
          <a-select-option :value="2">墨西哥</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="form.status">
          <a-radio :value="1">开启</a-radio>
          <a-radio :value="2">关闭</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="备注">
        <a-textarea :rows="4" v-model:value="form.remarks"/>
      </a-form-item>
    </a-form>

  </a-modal>

</template>

<script>
import {reactive, ref, toRefs, onMounted, computed} from 'vue'
import {fetchBusinessList, increaseBusiness, updateBusiness} from '@/api/authority'
import {increaseRole, updateRole} from "../../../api/authority";
import {message} from "ant-design-vue";

const tableColumn = [
  {title: '名称', dataIndex: 'name', align: 'center'},
  {title: '国家战区', dataIndex: 'countryName', align: 'center'},
  {
    title: '状态', dataIndex: 'status', align: 'center', customRender: ({text}) => {
      return text === 1 ? '启用' : '禁用'
    }
  },
  {
    title: '操作', fixed: 'right', width: 200, align: 'center', slots: {customRender: 'operation',}
  },
]
export default {
  name: "BusinessManage",
  setup() {
    const formRef = ref(null);
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      visible: {
        isShow: false,
        title: '',
        type: ''
      },
      tableData: [],
      menuForm: {},
      menuRulesForm: {},
      isAddContents: true,
      rulesForm: {
        name: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
        countryId: [
          {required: true, message: '不能为空', trigger: 'change', type: 'number'},
        ],
      },
      form: {
        status: 1,
        countryId: null
      }
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total + '条',
      onChange: (page) => {
        state.page.pageNum = page
        getBusinessList()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        getBusinessList()
      }
    }))

    function addBusiness() {
      state.visible = {
        isShow: true,
        type: 'add',
        title: '添加事业部'
      }
    }

    function editBusiness(rows) {
      state.form = {...rows}
      state.visible = {
        isShow: true,
        type: 'update',
        title: '修改事业部'
      }
    }

    async function getBusinessList() {
      const res = await fetchBusinessList(state.page)
      if (res.code === 200) {
        const {list, total} = res.data
        state.tableData = list
        state.page.total = total
      }
    }

    async function confirm() {
      formRef.value.validate().then(async () => {
        const isAdd = state.visible.type === 'add'
        const api = (params) => isAdd ? increaseBusiness(params) : updateBusiness(params)
        const res = await api(state.form)
        if (res.code === 200) {
          message.success(isAdd ? '添加成功' : '修改成功')
          getBusinessList()

          state.visible.isShow = false
        }
      })

    }

    function clearForm() {
      state.form = {
        status: 1,
        countryId: null
      }
      formRef.value.resetFields()
    }

    onMounted(() => {
      getBusinessList()
    })
    return {
      editBusiness,
      formRef,
      clearForm,
      confirm,
      addBusiness,
      tableColumn,
      pagination,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>
